import React from "react";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
// https://www.amcharts.com/demos/trend-lines/
class AmSampleLine extends React.Component {
  componentDidMount() {
    /**
     * ---------------------------------------
     * This demo was created using amCharts 4.
     *
     * For more information visit:
     * https://www.amcharts.com/
     *
     * Documentation is available at:
     * https://www.amcharts.com/docs/v4/
     * ---------------------------------------
     */

    // Create chart instance
    var chart = am4core.create("sampleLine", am4charts.XYChart);

    // Add data
    chart.data = [
      {
        date: "2012-01-01",
        value: 8,
      },
      {
        date: "2012-01-02",
        value: 10,
      },
      {
        date: "2012-01-03",
        value: 12,
      },
      {
        date: "2012-01-04",
        value: 14,
      },
      {
        date: "2012-01-05",
        value: 11,
      },
      {
        date: "2012-01-06",
        value: 6,
      },
      {
        date: "2012-01-07",
        value: 7,
      },
      {
        date: "2012-01-08",
        value: 9,
      },
      {
        date: "2012-01-09",
        value: 13,
      },
      {
        date: "2012-01-10",
        value: 15,
      },
      {
        date: "2012-01-11",
        value: 19,
      },
      {
        date: "2012-01-12",
        value: 21,
      },
      {
        date: "2012-01-13",
        value: 22,
      },
      {
        date: "2012-01-14",
        value: 20,
      },
      {
        date: "2012-01-15",
        value: 18,
      },
      {
        date: "2012-01-16",
        value: 14,
      },
      {
        date: "2012-01-17",
        value: 16,
        opacity: 0,
      },
      {
        date: "2012-01-18",
        value: 18,
      },
      {
        date: "2012-01-19",
        value: 17,
      },
      {
        date: "2012-01-20",
        value: 15,
      },
      {
        date: "2012-01-21",
        value: 12,
      },
      {
        date: "2012-01-22",
        value: 10,
      },
      {
        date: "2012-01-23",
        value: 8,
      },
    ];

    // Create axes
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.renderer.grid.template.location = 0.5;
    dateAxis.dateFormatter.inputDateFormat = "yyyy-MM-dd";
    dateAxis.renderer.minGridDistance = 40;
    dateAxis.tooltipDateFormat = "MMM dd, yyyy";
    dateAxis.dateFormats.setKey("day", "dd");
    chart.cursor = new am4charts.XYCursor();
    chart.cursor.xAxis = dateAxis;
    chart.cursor.behavior = "none";
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    var addingPointsDisabled = false;

    // Create series
    var series = chart.series.push(new am4charts.LineSeries());
    series.tooltipText = "{date}\n[bold font-size: 17px]value: {valueY}[/]";
    series.dataFields.valueY = "value";
    series.dataFields.dateX = "date";
    series.strokeDasharray = 3;
    series.strokeWidth = 2;
    series.strokeOpacity = 0.3;
    series.strokeDasharray = "3,3";
    series.interpolationDuration = 0;

    var bullet = series.bullets.push(new am4charts.CircleBullet());
    bullet.draggable = true;

    bullet.strokeWidth = 2;
    bullet.stroke = am4core.color("#fff");
    bullet.setStateOnChildren = true;
    bullet.propertyFields.fillOpacity = "opacity";
    bullet.propertyFields.strokeOpacity = "opacity";

    var hoverState = bullet.states.create("hover");
    hoverState.properties.scale = 1.7;
    bullet.events.on("dragged", function (event) {
      var bullet = event.target;

      var x = bullet.pixelX;
      x = dateAxis.getX(bullet.dataItem, "dateX"); //  uncomment this line if you want to allow draggin bullets only along y axis

      bullet.moveTo({ x: x, y: bullet.pixelY }, undefined, undefined, true);
      bullet.dataItem.valueY = valueAxis.yToValue(bullet.pixelY);
      bullet.dataItem.dataContext.newValue = bullet.dataItem.valueY;

      // remove the following three lines if you want to allow draggin bullets only along y axis
      bullet.dataItem.dateX = dateAxis.xToValue(bullet.pixelX);
      bullet.dataItem.dataContext.date = bullet.dataItem.dateX;
      dateAxis.postProcessSeriesDataItem(bullet.dataItem);
    });
    bullet.events.on("down", function (event) {
      addingPointsDisabled = true;

      chart.cursor.triggerMove(
        { x: series.tooltipX, y: series.tooltipY },
        "hard"
      ); // sticks cursor to the point
    });

    bullet.events.on("dragstop", function (event) {
      var bullet = event.target;

      chart.cursor.triggerMove(
        { x: series.tooltipX, y: series.tooltipY },
        "none"
      ); // enables mouse following again

      addingPointsDisabled = false;
    });

    bullet.events.on("doublehit", function (event) {
      addingPointsDisabled = false;
      var dataItem = event.target.dataItem;
      var dataContext = dataItem.dataContext;
      series.data.splice(series.data.indexOf(dataContext), 1);
      series.invalidateData();

      chart.cursor.triggerMove(
        { x: series.tooltipX, y: series.tooltipY },
        "none"
      ); // enables mouse following again
    });
    var interaction = am4core.getInteraction();

    interaction.events.on("up", function (event) {
      if (series && !addingPointsDisabled && chart.cursor.visible) {
        var date = series.tooltipDataItem.dateX;
        var point = am4core.utils.documentPointToSprite(
          event.pointer.point,
          chart.seriesContainer
        );
        var value = valueAxis.yToValue(point.y);
        if (value > valueAxis.min && value < valueAxis.max) {
          series.data.push({ date: date, newValue: value });
          sortData();
          series.invalidateData();
        }
      }
    });

    function sortData() {
      series.data.sort(function (a, b) {
        var atime = a.date.getTime();
        var btime = b.date.getTime();

        if (atime < btime) {
          return -1;
        } else if (atime == btime) {
          return 0;
        } else {
          return 1;
        }
      });
    }
    // function createTrendLine(data) {
    //   var trend = chart.series.push(new am4charts.LineSeries());
    //   trend.dataFields.valueY = "value";
    //   trend.dataFields.dateX = "date";
    //   trend.strokeWidth = 2;
    //   trend.stroke = trend.fill = am4core.color("#c00");
    //   trend.data = data;

    //   var bullet = trend.bullets.push(new am4charts.CircleBullet());
    //   bullet.tooltipText = "{date}\n[bold font-size: 17px]value: {valueY}[/]";
    //   bullet.strokeWidth = 2;
    //   bullet.stroke = am4core.color("#fff");
    //   bullet.circle.fill = trend.stroke;

    //   var hoverState = bullet.states.create("hover");
    //   hoverState.properties.scale = 1.7;

    //   return trend;
    // }

    // createTrendLine([
    //   { date: "2012-01-02", value: 10 },
    //   { date: "2012-01-11", value: 19 },
    // ]);

    // var lastTrend = createTrendLine([
    //   { date: "2012-01-17", value: 16 },
    //   { date: "2012-01-22", value: 10 },
    // ]);

    // Initial zoom once chart is ready
    // lastTrend.events.once("datavalidated", function () {
    //   series.xAxis.zoomToDates(new Date(2012, 0, 2), new Date(2012, 0, 13));
    // });
  }
  componentWillUnmount() {}
  render() {
    return (
      <div id="sampleLine" style={{ width: "100%", height: "500px" }}></div>
    );
  }
}
export default AmSampleLine;
